<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
.dv {
	border: 1px solid #ccc;
	width: 100px;
	height: 100px;
}

.dv #inp {
	width: 100%;
	height: 100%;
	opacity: 0;
}

.yulan {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
}

</style>

<body>
  <script>
    function notifyMe() {
      // 先检查浏览器是否支持
      if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
      }

      // 检查用户是否同意接受通知
      else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification("Hi there!");
      }

      // 否则我们需要向用户获取权限
      else if (Notification.permission === 'denied') {
        Notification.requestPermission(function (permission) {
          // 如果用户同意，就可以向他们发送通知
          if (permission === "granted") {
            var notification = new Notification("Hi there!");
          }
        });
      }

      // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
      // 出于尊重，我们不应该再打扰他们了
    }
    notifyMe();
  </script>
</body>

</html>